<template>
  <div class='question-container' style="padding:0 10px;margin:10px 0">
    <el-card class="box-card">
      <!-- 新增按钮 -->
      <div style="text-align:right">
        <el-button type="success" size="small" icon="el-icon-edit" @click="$router.push('new')"  style="margin-bottom:10px" >新增试题</el-button>
      </div>
      <el-form label-width='70px' style="margin-left:50px">
        <el-row>
          <el-col :span="6">
       <el-form-item label="学科" >
       <el-select  placeholder="请选择" @change="changkeSubject"  v-model="Questions.subject">
        <el-option v-for="item in SubjectsList" :key="item.id" :label='item.subjectName' :value="item.id"  ></el-option>
        </el-select>
      </el-form-item>
          </el-col>
          <el-col :span="6">
       <el-form-item label="二级目录">
       <el-select  placeholder="请选择" v-model="Questions.catalogue">
      <el-option v-for="item in catalogueList" :key="item.id" :label="item.directoryName" :value="item.id"></el-option>
      </el-select>
      </el-form-item>
          </el-col>
    <el-col :span="6">
    <el-form-item label="标签">
       <el-select  placeholder="请选择" v-model="Questions.label">
      <el-option v-for="item in LabelList" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      </el-form-item>
          </el-col>
    <el-col :span="6">
    <el-form-item label="关键字" style="width:90%">
    <el-input></el-input>
      </el-form-item>
          </el-col>
          <el-col :span="6">
       <el-form-item label="试题类型">
       <el-select  placeholder="请选择" v-model="Questions.questionType">
      <el-option v-for="item in TestList" :key="item.label" :label="item.label" :value="item.value"></el-option>
      </el-select>
      </el-form-item>
          </el-col>
          <el-col :span="6">
       <el-form-item label="难度">
       <el-select  placeholder="请选择" v-model="Questions.difficulty">
      <el-option v-for="item in DifficultyList" :key="item.label" :label="item.label" :value="item.value"></el-option>
      </el-select>
      </el-form-item>
          </el-col>
    <el-col :span="6">
    <el-form-item label="方向">
       <el-select  placeholder="请选择" v-model="Questions.direction">
      <el-option v-for="item in DirectionList" :key="item" :label="item" :value="item"></el-option>
      </el-select>
      </el-form-item>
          </el-col>
    <el-col :span="6">
    <el-form-item label="录用人" >
       <el-select  placeholder="请选择" v-model="Questions.appointee">
      <el-option v-for="item in AppointeeList" :key="item.id" :label="item.username" :value="item.id"></el-option>
      </el-select>
      </el-form-item>
          </el-col>
          <el-col :span="6">
       <el-form-item label="题目备注" style="width:90%">
      <el-input></el-input>
      </el-form-item>
          </el-col>
          <el-col :span="6">
       <el-form-item label="企业简称" style="width:90%">
         <el-input></el-input>
      </el-form-item>
          </el-col>
          <el-col :span="6">
       <el-form-item label="城市" >
       <el-select  placeholder="请选择" style="width:42%" @change="changeCity" v-model="Questions.city">
      <el-option v-for="item in CityList" :key="item" :label="item" :value="item"></el-option>
      </el-select>
       <el-select  placeholder="请选择" style="width:45%" v-model="Questions.region">
      <el-option v-for="item in RegionList" :key="item" :label="item" :value="item"></el-option>
      </el-select>
      </el-form-item>

          </el-col>
          <el-col :span="6" style="text-align:right">
            <el-button @click="clear()">清除</el-button>
            <el-button type="primary" @click="filter()">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
        <!-- 标签页 type="card"-->
      <el-tabs @tab-click="handleClick"  v-model="activeName" style="margin-left:50px">
        <el-tab-pane label="全部" name="all">
          <!-- 数据记录 -->
          <el-alert
            title="数据一共4条"
            type="info"
            :closable='false'
            show-icon>
          </el-alert>
          <el-table
          :data="tableData"
          style="width:100%;">
          <el-table-column prop="number" label="试题编号" width="250px"></el-table-column>
          <el-table-column prop="subject" label="学科" width="150px"></el-table-column>
          <el-table-column prop="catalog" label="目录" width="150px" ></el-table-column>
          <el-table-column  label="题型" width="180">
            <template #default="{row}">
              {{questionTypes(row.questionType)}}
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干" width="350px">
            <template #default="{row}" >
              <!-- {{row}} -->
              <div v-html="row.answer"></div>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="180">
            <template #default="{row}">
              {{row.addDate|parseTimeByString}}
            </template>
          </el-table-column>
          <el-table-column  label="难度" width="180">
            <template #default="{row}">
              {{ difficultys(row.difficulty)}}
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="180"></el-table-column>
          <el-table-column prop="chkState" label="审核状态" width="180">
            <template #default="{row}">
              {{ chekTypeAll(+row.chkState) }}
          </template>
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" width="180"></el-table-column>
          <el-table-column prop="chkUser" label="审核人" width="180"></el-table-column>
          <el-table-column  label="发布状态" width="180">
            <template #default="{row}">
              {{ publishTypeAll(+row.publishState) }}
            </template>
          </el-table-column>
          <el-table-column prop="date" label="操作" width="250px" fixed='right' >
            <template #default="{row}">
              <!-- 预览 @click="openCheckDialog(row)" :disabled="row.chkState!==0"-->
              <el-button type="text" size="small" @click="clickPreview(row.id)">预览</el-button>
              <el-button type="text" size="small" @click="openCheckDialog(row.id)" :disabled="row.chkState===1">审核</el-button>
              <el-button type="text" size="small" :disabled="+row.publishState === 1"  @click="$router.push(`new?id=${row.id}`)">修改</el-button>
              <el-button type="text" size="small" @click="handleDown(row)" v-if="+row.publishState === 1">下架</el-button>
              <el-button type="text" v-else size="small" @click="handleUp(row)" >上架</el-button>
              <el-button type="text" size="small" :disabled="+row.publishState === 1" @click="delQuestion(row)">删除</el-button>
            </template>
          </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="待审核" name="0">
          <el-alert
            title="数据一共4条"
            type="info"
            :closable='false'
            show-icon>
          </el-alert>
          <el-table
          :data="tabsList"
          style="width:100%;">
          <el-table-column prop="number" label="试题编号" width="250px"></el-table-column>
          <el-table-column prop="subject" label="学科" width="150px"></el-table-column>
          <el-table-column prop="catalog" label="目录" width="150px" ></el-table-column>
          <el-table-column  label="题型" width="180">
            <template #default="{row}">
              {{questionTypes(row.questionType)}}
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干" width="350px"></el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="180">
            <template #default="{row}">
              {{row.addDate|parseTimeByString}}
            </template>
          </el-table-column>
          <el-table-column  label="难度" width="180">
            <template #default="{row}">
              {{ difficultys(row.difficulty)}}
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="180"></el-table-column>
          <el-table-column prop="chkState" label="审核状态" width="180">
            <template #default="{row}">
              {{ chekTypeAll(+row.chkState) }}
          </template>
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" width="180"></el-table-column>
          <el-table-column prop="chkUser" label="审核人" width="180"></el-table-column>
          <el-table-column  label="发布状态" width="180">
            <template #default="{row}">
              {{ publishTypeAll(+row.publishState) }}
            </template>
          </el-table-column>
          <el-table-column prop="date" label="操作" width="250px" fixed='right' >
            <template #default="{row}">
              <!-- 预览 -->
              <el-button type="text" size="small" @click="clickPreview(row.id)">预览</el-button>
              <el-button type="text" size="small">审核</el-button>
              <el-button type="text" size="small" :disabled="+row.publishState === 1">修改</el-button>
              <el-button type="text" size="small" @click="handleDown(row)" v-if="+row.publishState === 1">下架</el-button>
              <el-button type="text" v-else size="small" @click="handleUp(row)" >上架</el-button>
              <el-button type="text" size="small" :disabled="+row.publishState === 1">删除</el-button>
            </template>
          </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已审核" name="1">
          <el-alert
            title="数据一共4条"
            type="info"
            :closable='false'
            show-icon>
          </el-alert>
          <el-table
          :data="tabsList"
          style="width:100%;">
          <el-table-column prop="number" label="试题编号" width="250px"></el-table-column>
          <el-table-column prop="subject" label="学科" width="150px"></el-table-column>
          <el-table-column prop="catalog" label="目录" width="150px" ></el-table-column>
          <el-table-column  label="题型" width="180">
            <template #default="{row}">
              {{questionTypes(row.questionType)}}
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干" width="350px"></el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="180">
            <template #default="{row}">
              {{row.addDate|parseTimeByString}}
            </template>
          </el-table-column>
          <el-table-column  label="难度" width="180">
            <template #default="{row}">
              {{ difficultys(row.difficulty)}}
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="180"></el-table-column>
          <el-table-column prop="chkState" label="审核状态" width="180">
            <template #default="{row}">
              {{ chekTypeAll(+row.chkState) }}
          </template>
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" width="180"></el-table-column>
          <el-table-column prop="chkUser" label="审核人" width="180"></el-table-column>
          <el-table-column  label="发布状态" width="180">
            <template #default="{row}">
              {{ publishTypeAll(+row.publishState) }}
            </template>
          </el-table-column>
          <el-table-column prop="date" label="操作" width="250px" fixed='right' >
           <template #default="{row}">
              <!-- 预览 -->
              <el-button type="text" size="small" @click="clickPreview(row.id)">预览</el-button>
              <el-button type="text" size="small">审核</el-button>
              <el-button type="text" size="small" :disabled="+row.publishState === 1">修改</el-button>
              <el-button type="text" size="small" @click="handleDown(row)" v-if="+row.publishState === 1">下架</el-button>
              <el-button type="text" v-else size="small" @click="handleUp(row)" >上架</el-button>
              <el-button type="text" size="small" :disabled="+row.publishState === 1">删除</el-button>
            </template>
          </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已拒绝" name="2">
          <el-alert
            title="数据一共4条"
            type="info"
            :closable='false'
            show-icon>
          </el-alert>
          <el-table
          :data="tabsList"
          style="width:100%;">
          <el-table-column prop="number" label="试题编号" width="250px"></el-table-column>
          <el-table-column prop="subject" label="学科" width="150px"></el-table-column>
          <el-table-column prop="catalog" label="目录" width="150px" ></el-table-column>
          <el-table-column  label="题型" width="180">
            <template #default="{row}">
              {{questionTypes(row.questionType)}}
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干" width="350px" ></el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="180">
            <template #default="{row}">
              {{row.addDate|parseTimeByString}}
            </template>
          </el-table-column>
          <el-table-column  label="难度" width="180">
            <template #default="{row}">
              {{ difficultys(row.difficulty)}}
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="180"></el-table-column>
          <el-table-column prop="chkState" label="审核状态" width="180">
            <template #default="{row}">
              {{ chekTypeAll(+row.chkState) }}
          </template>
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" width="180"></el-table-column>
          <el-table-column prop="chkUser" label="审核人" width="180"></el-table-column>
          <el-table-column  label="发布状态" width="180">
            <template #default="{row}">
              {{ publishTypeAll(+row.publishState) }}
            </template>
          </el-table-column>
          <el-table-column prop="date" label="操作" width="250px" fixed='right' >
          <template #default="{row}">
              <!-- 预览 -->
              <el-button type="text" size="small" @click="clickPreview(row.id)">预览</el-button>
              <el-button type="text" size="small">审核</el-button>
              <el-button type="text" size="small" :disabled="+row.publishState === 1">修改</el-button>
              <el-button type="text" size="small" @click="handleDown(row)" v-if="+row.publishState === 1">下架</el-button>
              <el-button type="text" v-else size="small" @click="handleUp(row)" >上架</el-button>
              <el-button type="text" size="small" :disabled="+row.publishState === 1">删除</el-button>
            </template>
          </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
        <!-- 预览对话框 -->
        <el-dialog
          title="题目预览"
          :visible="centerDialogVisible"
          width="80%"
          @close="centerDialogVisible = false"
          >
          <el-row style="border-bottom:1px solid #ccc;padding:10px">
            <el-col :span="6">【题型】:{{dialogQuestionType}}</el-col>
            <el-col :span="6">【编号】:{{detailList.id}}</el-col>
            <el-col :span="6">【难度】:{{dialogDifficulty}}</el-col>
            <el-col :span="6">【标签】:{{detailList.tags}}</el-col>
            <el-col :span="6">【学科】:{{detailList.subjectName}}</el-col>
            <el-col :span="6">【目录】:{{detailList.directoryName}}</el-col>
            <el-col :span="6">【方向】:{{detailList.direction}}</el-col>
          </el-row>
         【题干】: <div style="color:blue;margin:10px 0;" v-html="detailList.question">{{detailList.question}}</div>
         <div v-if="detailList.questionType!=='3'">
           <!-- 简答 -->
         <div >{{questionTypes(detailList.questionType)}} 选项:('以下选中的选项为正确答案') </div>
         <div v-for="item in detailList.options" :key="item.id" >
           <!-- 单选框 -->
           <el-radio v-if="+detailList.questionType === '1'" :value="item.isRight">{{item.title}}</el-radio>
           <!-- 多选框 -->
           <el-checkbox v-else :value="item.isRight?true:false">{{item.title}}</el-checkbox>
         </div>
         </div>

         <hr>
         <!-- 参考答案 -->
        【参考答案】:<el-button type="danger" size="small" @click="preivewVideo()">视频答案预览</el-button>
         <div class="video" v-show="play">
        <video ref="video" class="videos" :src="detailList.videoURL" controls></video>
      </div>
        <hr>
        <!-- 答案解析 -->
       【答案解析】: <div style="display:inline-block" v-html="detailList.answer"> </div>
        <hr>
        <!-- 题目备注 -->
        【题目备注】:{{detailList.remarks}}
          <span slot="footer" >
            <el-button @click="centerDialogVisible = false" type="primary">关闭</el-button>
          </span>
        </el-dialog>
        <!-- 审核对话框 -->
            <el-dialog title="题目审核" :visible.sync="show" width="400px">
      <el-form size="small">
        <el-form-item>
          <el-radio :label="1" v-model="checkData.chkState">通过</el-radio>
          <el-radio :label="2" v-model="checkData.chkState">拒绝</el-radio>
        </el-form-item>
        <el-form-item>
          <el-input type="textarea" v-model="checkData.chkRemarks" placeholder="请输入审核意见"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="show=false">取消</el-button>
        <el-button @click="confirm()" type="primary">确认</el-button>
      </div>
    </el-dialog>
        <!-- 分页 -->
      <el-pagination
      background
      @size-change="handleSizeChange"
      style="margin-top:20px;text-align:right"
      @current-change="pager"
      :current-page="Questions.page"
      :page-sizes="[5,10,20,50]"
      :page-size="Questions.pagesize"
      layout=" prev, pager, next,sizes, jumper"
      :total="total">
    </el-pagination>
  </el-card>
  </div>
</template>

<script>
import { list } from '@/api/hmmm/subjects.js'
import { list as qqqcatalogue } from '@/api/hmmm/directorys.js'
import { simple as qqqlabel } from '@/api/hmmm/tags.js'
import { questionType, difficulty, direction, chekType, publishType } from '@/api/hmmm/constants.js'
import { list as qqqappointee } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { choice, detail, choicePublish, choiceCheck, remove } from '@/api/hmmm/questions.js'
export default {
  name: 'Choice',
  questionType, // 题型转换
  difficulty, // 难道转换
  chekType, // 审核转换
  publishType, // 发布状态转换
  questionInfo: null,
  data () {
    return {
      // currentPage1: 5,
      // currentPage2: 5,
      // currentPage3: 5,s
      show: false,
      checkData: {
        id: null,
        chkState: 1,
        chkRemarks: null
      },
      currentPage4: 1,
      play: false, // 视频
      detailList: {}, // 预览数据
      SubjectsList: [], // 学科
      catalogueList: [], // 二级目录
      LabelList: [], // 标签
      TestList: questionType, // 试题类型
      DifficultyList: difficulty, // 难度
      DirectionList: direction, // 方向
      AppointeeList: [], // 录用人
      CityList: provinces, // 城市
      RegionList: [], // 地区
      tableData: [], // 列表
      centerDialogVisible: false, // 预览对话框
      activeName: 'all',
      total: 0,
      Questions: {
        subject: null, // 学科
        catalogue: null, // 二级目录
        label: null, // 标签
        questionType: null, // 试题类型
        difficulty: null, // 难度
        direction: null, // 方向
        appointee: null, // 录用人
        city: null, // 城市
        region: null, // 地区
        page: 1,
        pagesize: 5
      },
      tabsList: [] // tab栏切换的数组
    }
  },
  async created () {
    this.qqqSubjectsList() // 学科
    this.QQQappointee() // 录用人
    this.qqqcity() // 城市
    this.qqqList() // 列表
  },
  methods: {
    // 审核
    openCheckDialog (id) {
      this.checkData.id = id
      this.$nextTick(() => {
        this.open()
      })
    },
    // 学科
    async qqqSubjectsList () {
      const { data: { items } } = await list()
      console.log(items)
      this.SubjectsList = items
    },
    // 二级目录 标签
    async changkeSubject (e) {
      // console.log(e)
      // 二级目录
      const { data: { items } } = await qqqcatalogue({ subjectID: e })
      // console.log(res.data.items)
      this.catalogueList = items
      // 标签
      const { data } = await qqqlabel({ subjectID: e })
      console.log(data)
      this.LabelList = data
    },
    // 录用人
    async QQQappointee () {
      // // 用户
      const { data: { list } } = await qqqappointee()
      // console.log(res)
      this.AppointeeList = list
    },
    // 城市
    async qqqcity () {
      const res = await provinces()
      // console.log(res)
      this.CityList = res
    },
    /// 地区
    async changeCity (val) {
      const res = await citys(val)
      // console.log(res)
      this.RegionList = res
    },
    // 列表
    async qqqList () {
      // const { data: { items } } = await choice()
      const res = await choice(this.Questions)
      console.log(res)
      this.tableData = res.data.items
      // this.tableData = items
    },
    // 审核转换
    chekTypeAll (val) {
      if (val === 0) return '待审核'
      if (val === 1) return '已审核'
      if (val === 2) return '已拒绝'
    },
    // 发布状态转换
    publishTypeAll (row) {
      if (row === 0) return '待发布'
      if (row === 1) return '已发布'
      if (row === 2) return '已下架'
    },
    // 点击预览展示对话框
    async clickPreview (id) {
      const { data } = await detail({ id })
      console.log(data)
      this.detailList = data
      this.centerDialogVisible = true
    },
    // 题型
    questionTypes (data) {
      const obj = questionType.find(item => +item.value === +data)

      return obj ? obj.label : '未知'
    },
    // 难度
    difficultys (data) {
      const obj = difficulty.find(item => +item.value === +data)

      return obj ? obj.label : '未知'
    },
    // 视频
    preivewVideo () {
      this.play = true
      this.$refs.video.play()
    },
    // 标签页点击事件
    handleClick (tab) {
      console.log(tab)
      if (tab.name === '0') {
        this.tabsList = this.tableData.filter(item => +item.chkState === 0)
      } else if (tab.name === '1') {
        this.tabsList = this.tableData.filter(item => +item.chkState === 1)
      } else if (tab.name === '2') {
        this.tabsList = this.tableData.filter(item => +item.chkState === 2)
      }
    },
    // 下架
    async handleDown (row) {
      const res = await this.$confirm('您确定下架这道题目吗?', '提示', {
        type: 'warning'
      }).catch(() => {})
      if (res) {
        await choicePublish({ id: row.id, publishState: 0 })
        this.qqqList()
      }
    },

    // 上架
    async handleUp (row) {
      const res = await this.$confirm('您确定上架这道题目吗?', '提示', {
        type: 'warning'
      }).catch(() => {})
      if (res) {
        await choicePublish({ id: row.id, publishState: 1 })
        this.qqqList()
      }
    },
    // 分页
    handleSizeChange (size) {
      this.Questions.page = 1
      this.Questions.pagesize = size
    },
    pager (np) {
      this.Questions.page = np
      // this.getList()
    },
    clear () {
      for (const key in this.Questions) {
        if (key !== 'page' && key !== 'pagesize') this.Questions[key] = null
      }
    },
    filter () {
      this.Questions.page = 1
      // this.getList()
      this.qqqList()
    },
    // 审核
    open () {
      this.show = true
    },
    async confirm () {
      if (!this.checkData.chkRemarks) return this.$message.warning('请输入审核意见')
      // this.checkData.id = this.questionInfo
      console.log(this.checkData)
      await choiceCheck(this.checkData)
      this.$message.success('操作成功')
      this.show = false
      this.$emit('updateList')
    },
    // 删除
    async delQuestion (question) {
      await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await remove(question)
      this.$message.success('删除成功')
      // this.getList()
      this.qqqList()
    }
  },
  /// 题型
  computed: {
    dialogQuestionType () {
      const obj = questionType.find(item => +item.value === +this.detailList.questionType)
      return obj ? obj.label : '未知'
    },
    // 难度
    dialogDifficulty () {
      const obj = difficulty.find(item => +item.value === +this.detailList.difficulty)
      return obj ? obj.label : '未知'
    }

  }
}
</script>

<style scoped lang='scss'>
.videos{
  width: 500px;
  height: 300px;
}
  </style>
